<template>
	<uv-tabs 
		:list="list"
		:duration="duration"
		:lineColor="lineColorBg"
		:activeStyle="activeStyle"
		:inactiveStyle="inactiveStyle"
		:lineWidth="lineWidth"
		:lineHeight="lineHeight"
		:lineBgSize="lineBgSize"
		:itemStyle="itemStyle"
		:scrollable="scrollable"
		:current="current"
		:keyName="keyName"
		@change="change"
	>
	<template #right>
		<slot name="right"></slot>
	</template>
	</uv-tabs>
</template>

<script setup>
	import sheep from "@/sheep"
	import { computed } from "vue";
	const props = defineProps({
		// 滑块的移动过渡时间，单位ms
		duration: {
			type: Number,
			default: 300
		},
		// tabs标签数组
		list: {
			type: Array,
			default: () => []
		},
		// 滑块颜色
		lineColor: {
			type: String,
			default: '#DAFF45'
		},
		lineBg:{
			type: String,
			default:'/static/bg/lineBg.png'
		},
		isImgLine:{
			type:Boolean,
			default: false
		},
		// 菜单选择中时的样式
		activeStyle: {
			type: [String, Object],
			default: () => ({
				color: '#fff',
				fontSize:'28rpx',
				fontWeight:'bold'
			})
		},
		// 菜单非选中时的样式
		inactiveStyle: {
			type: [String, Object],
			default: () => ({
				color: '#888888',
				fontSize:'28rpx',
			})
		},
		// 滑块长度
		lineWidth: {
			type: [String, Number],
			default: 32
		},
		// 滑块高度
		lineHeight: {
			type: [String, Number],
			default: 2
		},
		// 滑块背景显示大小，当滑块背景设置为图片时使用
		lineBgSize: {
			type: String,
			default: 'cover'
		},
		// 菜单item的样式
		itemStyle: {
			type: [String, Object],
			default: () => ({
				height: '44px',
				background: 'transparent',
			})
		},
		// 菜单是否可滚动
		scrollable: {
			type: Boolean,
			default: false
		},
		// 当前选中标签的索引
		current: {
			type: [Number, String],
			default: 0
		},
		// 默认读取的键名
		keyName: {
			type: String,
			default: 'name'
		},
		...uni.$uv?.props?.tabs
	})
	const emits = defineEmits(['change'])
   const lineImg = computed(() => {
	   return sheep.$config.staticUrl + props.lineBg
   })
   const lineColorBg = computed( () => {
	   if(props.isImgLine) {
			return `url(${lineImg.value}) 100% 100%`
	   }
	   return props.lineColor
   })
   function change(e){
	   emits('change',e)
   }
</script>

<style lang="scss" scoped>
:deep(.uv-tabs__wrapper__nav__item) {
		padding: 0 12rpx !important;
	}
</style>